<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跑者天地 - 注销</title>
    <link rel="stylesheet" href="css/css/all.min.css">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- 头部导航 -->
<div id="header-container"></div>

<!-- 主要内容区域 -->
<div class="container">
    <div class="logout-container">
        <div class="card">
            <div class="card-body logout-card">
                <div class="logout-icon">
                    <i class="fas fa-sign-out-alt"></i>
                </div>
                <h2 class="logout-message">您确定要退出登录吗？</h2>
                <p>退出后您将无法发布新内容、评论和接收通知</p>

                <div style="margin-top: 40px; display: flex; justify-content: center; gap: 20px;">
                    <button id="cancel-btn" class="btn-submit" style="background: var(--gray);">取消</button>
                    <button id="logout-btn" class="btn-submit" style="background: var(--accent);">确认退出</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 页脚 -->
<footer>
    <div class="container">
        <div class="footer-content">
            <div class="footer-column">
                <h3>关于我们</h3>
                <ul class="footer-links">
                    <li><a href="#">社区简介</a></li>
                    <li><a href="#">团队介绍</a></li>
                    <li><a href="#">加入我们</a></li>
                    <li><a href="#">联系方式</a></li>
                </ul>
            </div>

            <div class="footer-column">
                <h3>跑步资源</h3>
                <ul class="footer-links">
                    <li><a href="#">训练计划</a></li>
                    <li><a href="#">装备指南</a></li>
                    <li><a href="#">营养建议</a></li>
                    <li><a href="#">赛事日历</a></li>
                </ul>
            </div>

            <div class="footer-column">
                <h3>帮助中心</h3>
                <ul class="footer-links">
                    <li><a href="#">使用指南</a></li>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">社区规则</a></li>
                    <li><a href="#">反馈建议</a></li>
                </ul>
            </div>

            <div class="footer-column">
                <h3>关注我们</h3>
                <ul class="footer-links">
                    <li><a href="#"><i class="fab fa-weixin"></i> 微信公众号</a></li>
                    <li><a href="#"><i class="fab fa-weibo"></i> 新浪微博</a></li>
                    <li><a href="#"><i class="fab fa-qq"></i> QQ群</a></li>
                    <li><a href="#"><i class="fab fa-bilibili"></i> Bilibili</a></li>
                </ul>
            </div>
        </div>

        <div class="copyright">
            &copy; 2023 跑者天地论坛 - 专业的跑步交流社区 | 让每一步都有意义
        </div>
    </div>
</footer>

<script src="js/jquery.min.js"></script>
<script src="js/common.js"></script>
<script>
    $.ajax({ })


    fetch('header.html')
        .then(response => response.text())
        .then(data => {
            document.getElementById('header-container').innerHTML = data;
            // 设置当前页面导航激活状态
            document.querySelector('a[href="logout.html"]').classList.add('active');
        });


    // 注销功能
    document.getElementById('logout-btn').addEventListener('click', function() {
        alert('您已成功退出登录');
            localStorage.removeItem("user_token");
            location.href = "login.html";
    });

    document.getElementById('cancel-btn').addEventListener('click', function() {
        window.location.href = 'logout.html';
    });
</script>
</body>
</html>